<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>网络攻防演练监控屏幕</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
  <link rel="shortcut icon" href="/static/images/favicon.ico">
  <!--[if lte IE 8]><meta http-equiv="refresh" content="0;url=/ie" /><![endif]-->
  
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/css/main.css">
  <script src="/static/js/echarts.min.js"></script>
  <script src="/static/js/map/china.js"></script> 
  <script src="/static/js/jquery-3.2.1.min.js"></script> 
  <script src="/static/js/bootstrap.min.js"></script>
</head>

<body class="container-fluid">
    <div class="col-md-12">
      <div class="row">
        <div id="main" style="height:1080px;"></div>
      </div>
    </div>
    
    <div class="col-md-3 chart_column">
      <div class="attackFlow" id="tianjinFlow" style="height:200px;"></div>
      <div class="attackFlow" id="hebeiFlow" style="height:200px;"></div>
      <div class="attackFlow" id="shanxiFlow" style="height:200px;"></div>
      <div class="attackFlow" id="shandongFlow" style="height:200px;"></div>
    </div>

    <div class="col-md-3 text_column" >
      <div class="intro">
      <h2><span class="label label-primary">1</span> DDOS攻击</h2>
      <p>黑客利用天津、河北、山西和山东四省的IP向北京某互联网企业发起DDoS攻击。  </p>
      </div>
      
      
      <div class="alarm">
      </div>
      
      <div class="defense">
      </div>
    </div>
    
    <div class="col-md-9 long_chart" id="beijingFlow" style="height:200px;"></div>


  
<div id="alarmModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <h1 class="alarm"><i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i>&nbsp;&nbsp;警报</h1>
        <h1>发现DDOS攻击!!!</h1>
      </div>
    </div>
</div>
</body>

<script type="text/javascript">
var alarmModal = $('#alarmModal').on('shown.bs.modal', function () {
  clearTimeout(alarmModal.data('hideInteval'))
  var id = setTimeout(function(){
      alarmModal.modal('hide');
  }, 8000);
  alarmModal.data('hideInteval', id);
})
</script> 

<script type="text/javascript">
var attackAreaBases = ['天津', '河北', '山西', '山东'];
var sourceArea = '北京';
var pageStatus = {
  activeAttackArea: '',
  lastDefensingArea: '',
  attackAreas: [],
  defensingAreas: [],
  attackViolent: false,
  focusArea: '河北'
};
</script> 
<script src="/echarts/ddos.js"></script> 
<script src="/echarts/ddos_flow.js"></script> 
<script type="text/javascript">
var ddosChart = echarts.init(document.getElementById('main'));
ddosChart.setOption(moveOption);

var beijingFlowChart = echarts.init(document.getElementById('beijingFlow'));
beijingFlowChart.setOption(beijingFlowOption);

var attackFlowCharts = [];
$(".attackFlow").each(function(index, chartDiv) {
  let flowChart = echarts.init(chartDiv);
  flowChart.setOption(attackAreaFlowOptions[index]);
  attackFlowCharts.push(flowChart);
});

$(window).resize(function() {
  ddosChart.resize();
  beijingFlowChart.resize();
  
  attackFlowCharts.forEach(function(flowChart) {
    flowChart.resize();
  });
});


var animationOption = {
  geo: {
  }
};

var ddosApi = "/api/ddos.json";
function getDdosJsonAndRedraw() {
  $.getJSON(ddosApi, function( result ) {
    if(result.alarm) {
      $('#alarmModal').modal('show');
    }
    
    if(result.defensingAreas.length + result.attackAreas.length == 0 
        && pageStatus.defensingAreas.length + pageStatus.attackAreas.length > 0 ) {
      pageStatus = result;
      redrawChart(initialOption);
      return;
    }
    
    if(result.attackViolent && animationOption.geo.zoom != 7) {
      pageStatus = result;
      animationOption.geo.zoom = 7;
      animationOption.geo.center = geoCoordMap['河北'];
      redrawChart(animationOption);
      return;
    }
    
    if(pageStatus.defensingAreas.length > 0 || result.defensingAreas.length > 0) {
      pageStatus = result;
      animationOption.geo.zoom = 5;
      animationOption.geo.center = geoCoordMap[pageStatus.focusArea];
      redrawChart(animationOption);
      return;
    }
    
    if(pageStatus.attackAreas.length == result.attackAreas.length) {
      return;
    } else {
      pageStatus = result;
      animationOption.geo.zoom = 5;
      animationOption.geo.center = geoCoordMap[pageStatus.focusArea];
      redrawChart(animationOption);
    }
  });

}

function redrawChart(otherOption) {
  moveOption.series[0].data = buildAttackLines();
  moveOption.series[1].data = buildAttackLines();
  moveOption.series[2].data = buildAreaScatter();
  moveOption.series[2].markPoint.data = buildDefenseMarkPoint();
  moveOption.series[3].data = buildDefensingLines();
  moveOption.series[4].data = buildDefensingLines();
  $.extend(true, moveOption, otherOption);
  ddosChart.setOption(moveOption);
}

setInterval(getDdosJsonAndRedraw, 1000);
</script>
</html>
